<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevOps运维仪表板 - 实时监控</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <style>
        .metric-card {
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        }
        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .status-indicator {
            animation: pulse 2s infinite;
        }
        .chart-container {
            position: relative;
            height: 300px;
        }
        .real-time-data {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
    </style>
</head>
<body class="bg-base-100">
    <div id="dashboard">
        <!-- 顶部导航 -->
        <div class="navbar bg-base-100 shadow-lg">
            <div class="navbar-start">
                <a href="index.html" class="btn btn-ghost text-xl">
                    <i class="fas fa-arrow-left mr-2"></i>
                    返回主页
                </a>
            </div>
            <div class="navbar-center">
                <h1 class="text-2xl font-bold">DevOps运维仪表板</h1>
            </div>
            <div class="navbar-end">
                <div class="flex items-center space-x-4">
                    <div class="status-indicator">
                        <div class="badge badge-success gap-2">
                            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                            系统正常
                        </div>
                    </div>
                    <div class="text-sm">
                        最后更新: {{ currentTime }}
                    </div>
                </div>
            </div>
        </div>

        <div class="container mx-auto px-4 py-6">
            <!-- 关键指标概览 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="metric-card p-6 rounded-xl shadow-lg">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">活跃服务</p>
                            <p class="text-3xl font-bold text-blue-600">{{ metrics.activeServices }}</p>
                            <p class="text-xs text-green-600">
                                <i class="fas fa-arrow-up"></i> +2 本周
                            </p>
                        </div>
                        <div class="text-4xl text-blue-500">
                            <i class="fas fa-server"></i>
                        </div>
                    </div>
                </div>

                <div class="metric-card p-6 rounded-xl shadow-lg">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">构建成功率</p>
                            <p class="text-3xl font-bold text-green-600">{{ metrics.buildSuccessRate }}%</p>
                            <p class="text-xs text-green-600">
                                <i class="fas fa-arrow-up"></i> +1.2% 本周
                            </p>
                        </div>
                        <div class="text-4xl text-green-500">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                </div>

                <div class="metric-card p-6 rounded-xl shadow-lg">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">平均响应时间</p>
                            <p class="text-3xl font-bold text-orange-600">{{ metrics.avgResponseTime }}ms</p>
                            <p class="text-xs text-red-600">
                                <i class="fas fa-arrow-up"></i> +15ms 本周
                            </p>
                        </div>
                        <div class="text-4xl text-orange-500">
                            <i class="fas fa-clock"></i>
                        </div>
                    </div>
                </div>

                <div class="metric-card p-6 rounded-xl shadow-lg">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-600">今日部署</p>
                            <p class="text-3xl font-bold text-purple-600">{{ metrics.todayDeployments }}</p>
                            <p class="text-xs text-green-600">
                                <i class="fas fa-arrow-up"></i> +3 较昨日
                            </p>
                        </div>
                        <div class="text-4xl text-purple-500">
                            <i class="fas fa-rocket"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                <!-- 系统资源使用率 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title">
                            <i class="fas fa-chart-area text-primary mr-2"></i>
                            系统资源使用率
                        </h2>
                        <div class="chart-container">
                            <canvas id="resourceChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 构建趋势 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title">
                            <i class="fas fa-chart-line text-secondary mr-2"></i>
                            构建趋势
                        </h2>
                        <div class="chart-container">
                            <canvas id="buildChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 服务状态和最近活动 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- 服务状态 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title">
                            <i class="fas fa-list text-accent mr-2"></i>
                            服务状态
                        </h2>
                        <div class="space-y-4">
                            <div v-for="service in services" :key="service.name" class="real-time-data">
                                <div class="flex items-center justify-between p-4 bg-base-200 rounded-lg">
                                    <div class="flex items-center space-x-3">
                                        <div :class="['w-3 h-3 rounded-full', service.status === 'running' ? 'bg-green-500' : service.status === 'warning' ? 'bg-yellow-500' : 'bg-red-500']"></div>
                                        <div>
                                            <p class="font-semibold">{{ service.name }}</p>
                                            <p class="text-sm text-gray-600">{{ service.description }}</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-medium">{{ service.uptime }}</p>
                                        <p class="text-xs text-gray-500">运行时间</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近活动 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title">
                            <i class="fas fa-history text-info mr-2"></i>
                            最近活动
                        </h2>
                        <div class="space-y-3">
                            <div v-for="activity in recentActivities" :key="activity.id" class="real-time-data">
                                <div class="flex items-start space-x-3 p-3 hover:bg-base-200 rounded-lg transition-colors">
                                    <div :class="['w-2 h-2 rounded-full mt-2', activity.type === 'success' ? 'bg-green-500' : activity.type === 'warning' ? 'bg-yellow-500' : 'bg-blue-500']"></div>
                                    <div class="flex-1">
                                        <p class="text-sm font-medium">{{ activity.message }}</p>
                                        <p class="text-xs text-gray-500">{{ activity.time }}</p>
                                    </div>
                                    <div :class="['badge badge-sm', activity.type === 'success' ? 'badge-success' : activity.type === 'warning' ? 'badge-warning' : 'badge-info']">
                                        {{ activity.type }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="card bg-base-100 shadow-xl mt-8">
                <div class="card-body">
                    <h2 class="card-title">
                        <i class="fas fa-bolt text-warning mr-2"></i>
                        快速操作
                    </h2>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <button class="btn btn-primary" @click="triggerBuild">
                            <i class="fas fa-play mr-2"></i>
                            触发构建
                        </button>
                        <button class="btn btn-secondary" @click="deployLatest">
                            <i class="fas fa-rocket mr-2"></i>
                            部署最新版本
                        </button>
                        <button class="btn btn-accent" @click="viewLogs">
                            <i class="fas fa-file-alt mr-2"></i>
                            查看日志
                        </button>
                        <button class="btn btn-info" @click="refreshData">
                            <i class="fas fa-sync-alt mr-2"></i>
                            刷新数据
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    currentTime: '',
                    metrics: {
                        activeServices: 12,
                        buildSuccessRate: 98.5,
                        avgResponseTime: 125,
                        todayDeployments: 8
                    },
                    services: [
                        { name: 'Jenkins Master', description: 'CI/CD服务器', status: 'running', uptime: '15天 3小时' },
                        { name: 'Kubernetes API', description: '容器编排服务', status: 'running', uptime: '30天 12小时' },
                        { name: 'Harbor Registry', description: '镜像仓库', status: 'running', uptime: '25天 8小时' },
                        { name: 'Prometheus', description: '监控服务', status: 'warning', uptime: '2天 5小时' },
                        { name: 'Grafana', description: '可视化服务', status: 'running', uptime: '10天 15小时' },
                        { name: 'ELK Stack', description: '日志分析', status: 'running', uptime: '20天 2小时' }
                    ],
                    recentActivities: [
                        { id: 1, message: '用户服务 v2.1.3 部署成功', time: '2分钟前', type: 'success' },
                        { id: 2, message: '订单服务构建完成', time: '5分钟前', type: 'info' },
                        { id: 3, message: '支付服务内存使用率偏高', time: '10分钟前', type: 'warning' },
                        { id: 4, message: 'API网关重启完成', time: '15分钟前', type: 'success' },
                        { id: 5, message: '数据库备份任务执行', time: '30分钟前', type: 'info' },
                        { id: 6, message: '新版本代码推送到仓库', time: '45分钟前', type: 'info' }
                    ],
                    resourceChart: null,
                    buildChart: null
                }
            },
            mounted() {
                this.updateTime();
                this.initCharts();
                setInterval(this.updateTime, 1000);
                setInterval(this.updateMetrics, 30000);
            },
            methods: {
                updateTime() {
                    this.currentTime = new Date().toLocaleString('zh-CN');
                },
                updateMetrics() {
                    // 模拟实时数据更新
                    this.metrics.avgResponseTime = Math.floor(Math.random() * 50) + 100;
                    this.metrics.buildSuccessRate = (Math.random() * 2 + 97).toFixed(1);
                },
                initCharts() {
                    this.initResourceChart();
                    this.initBuildChart();
                },
                initResourceChart() {
                    const ctx = document.getElementById('resourceChart').getContext('2d');
                    this.resourceChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
                            datasets: [{
                                label: 'CPU使用率',
                                data: [45, 52, 68, 75, 82, 70, 65],
                                borderColor: 'rgb(59, 130, 246)',
                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                                tension: 0.4
                            }, {
                                label: '内存使用率',
                                data: [60, 65, 70, 78, 85, 80, 75],
                                borderColor: 'rgb(16, 185, 129)',
                                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                                tension: 0.4
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top',
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100,
                                    ticks: {
                                        callback: function(value) {
                                            return value + '%';
                                        }
                                    }
                                }
                            }
                        }
                    });
                },
                initBuildChart() {
                    const ctx = document.getElementById('buildChart').getContext('2d');
                    this.buildChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            datasets: [{
                                label: '成功构建',
                                data: [12, 15, 18, 22, 20, 8, 5],
                                backgroundColor: 'rgba(34, 197, 94, 0.8)',
                                borderColor: 'rgb(34, 197, 94)',
                                borderWidth: 1
                            }, {
                                label: '失败构建',
                                data: [1, 2, 1, 0, 2, 1, 0],
                                backgroundColor: 'rgba(239, 68, 68, 0.8)',
                                borderColor: 'rgb(239, 68, 68)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top',
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    });
                },
                triggerBuild() {
                    alert('构建任务已触发！');
                    // 模拟添加新活动
                    this.recentActivities.unshift({
                        id: Date.now(),
                        message: '手动触发构建任务',
                        time: '刚刚',
                        type: 'info'
                    });
                },
                deployLatest() {
                    alert('正在部署最新版本...');
                    this.recentActivities.unshift({
                        id: Date.now(),
                        message: '开始部署最新版本',
                        time: '刚刚',
                        type: 'info'
                    });
                },
                viewLogs() {
                    window.open('logs.html', '_blank');
                },
                refreshData() {
                    this.updateMetrics();
                    alert('数据已刷新！');
                }
            }
        }).mount('#dashboard');
    </script>
</body>
</html>